<template>
  <div class="actors" v-if="formattedActors.length > 0">
    <div class="title">演职人员</div>
    <div class="all" @click="gotoCredits">全部<van-icon name="arrow" /></div>
  </div>

  <div class="swipe">
    <ul class="stars">
      <li v-for="actor in formattedActors" :key="actor.id">
        <img class="thumb" :src="actor.avatar" />
        <p class="name">{{ actor.cnm }}</p>
        <p class="role">{{ actor.desc }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { updateActorImageUrl } from '@/tools/index.js'
import { computed } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  movieActors: {
    type: Array,
  },
  movieDetailPage: {
    type: Object,
  },
})

const formattedActors = computed(() => {
  return props.movieActors.map((actor) => ({
    ...actor,
    avatar: updateActorImageUrl(actor.avatar),
  }))
})

const movieId = computed(() => props.movieDetailPage.movieInfo.id)

//全部演职人员列表
const gotoCredits = () => {
  router.push({ path: `/movie/${movieId.value}/credits` })
}
</script>

<style scoped>
.actors {
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.actors .title {
  font-size: 15px;
}

.actors .all {
  cursor: pointer;
  font-size: 12px;
}

.swipe {
  margin-top: 10px;
}

.stars {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE 和 Edge  隐藏滚动条 */
  scrollbar-width: none;
  /* Firefox 隐藏滚动条*/
}

.stars::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera 隐藏滚动条 */
}

.stars li {
  margin-right: 10px;
  text-align: center;
  width: 80px;
  height: auto;
}

.stars li img {
  width: 80px;
  height: 112px;
}

.stars li .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
  font-size: 12px;
  margin: 0;
  color: #fff;
}

.stars li .role {
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
  margin: 0;
  color: #fff;
  opacity: 0.5;
}
</style>
